﻿@model MovingFromPartialViews.Models.IndexModel

<div class="container">
    <div class="hero-unit">
        <h1>Sample application</h1>
        <p>
            This sample application is used to demonstrate moving from ASP.NET MVC Partial Views
            to a system of AJAX + Client Side rendering.
        </p>
        <p>This example explained is available at <a href="http://visualstudiomagazine.com/articles/2013/05/01/moving-from-partial-views-to-ajax-calls.aspx">here</a></p>
    </div>
</div>

<div class="container">
    <div id="categoryList">
    </div>
    <div id="addItem">
        <div class="row">
            <div class="span3">
                @Html.DropDownList("CategoryName", Model.AllCategories.Select(s => new SelectListItem { Text = s, Value = s }))
            </div>
            <div class="span9">
                <div class="input-append">
                    @Html.TextBox("Name", "", new { @class = "span8" })
                    <button class="btn btn-primary" id="addNew">Add</button>
                </div>
            </div>
        </div>
    </div>
</div>
@section scripts
{
    <script id="itemsTemplate" type="text/template">
        [% $.each(Categories, function(index, cat) { %]
        <div class="row category">
            <div class="span12">[%= cat.Name %]</div>
        </div>
        [% $.each(cat.Subscriptions, function(index, sub) { %]
        <div class="row">
            <div class="offset1 span6 [%= sub.UnreadCount > 0 ? 'unread-items' : 'no-items' %]">
                [[%= sub.UnreadCount %]] [%= sub.Name %]
            </div>
            <div class="span2">
                <button class="btn btn-mini" type="button" action="del" data-name="[%= sub.Name %]">
                    Delete
                </button>
            </div>
        </div>
        [% }) %]
        [% }) %]
    </script>
    
    <script type="text/javascript">
        function refreshList() {
            $.getJSON('/home/subslist', function(model) {
                itemsTemplate.update('categoryList', model);
            });
        }
    </script>

    <script type="text/javascript">
        $(document).on('click', 'button[action=del]', function(e) {
            var name = e.target.attributes["data-name"].value;
            $.ajax({
                url: '/home/delete',
                type: 'POST',
                data: {
                    subName: name
                },
                success: function() {
                    refreshList();
                }
            });
        });

        $(document).ready(function () {
            itemsTemplate = new EJS({ element: 'itemsTemplate' });
            var model = @Html.Raw(Json.Encode(Model));
            itemsTemplate.update('categoryList', model);
        });

        $('#addNew').on('click', function() {
            $.ajax({
                url: '/home/add',
                type: 'POST',
                data: {
                    CategoryName: $('#CategoryName option:selected').text(),
                    Name: $('#Name').val()
                },
                success: function(model) {
                    itemsTemplate.update('categoryList', model);
                    $('#Name').val('');
                }
            });
        });      
    </script>
}
